<template>
  <div class="container">
    <div class="userInfo mokuai">
      <el-upload :on-success="fileSuccess" :headers="headerObj" :show-file-list="false" action="http://127.0.0.1:8000/upload/avatar">
        <div class="avatarErea">
          <img :key="imgkey" class="avatar" :src="userInfo.avatar_url? userInfo.avatar_url + `?tempid=${Math.random()}` : userInfo.sex ===1?'../../../static/defaultAvatar1.jpeg':'../../../static/defaultAvatar2.jpeg'" alt="" />
          <div class="camera">
            <i class="iconfont icon-xiangji"></i>
          </div>
        </div>
      </el-upload>
      <div class="userName">{{oldUserInfo.name}}</div>
      <div class="userName">{{oldUserInfo.graduateAt? oldUserInfo.graduateAt + '届' : ''}}</div>
      <div class="userName">{{oldUserInfo.discipline? oldUserInfo.discipline : ''}}</div>
    </div>
    <el-progress :format="formatpercentage" :text-inside="true" :stroke-width="26" :percentage="percentage" :color="customColorMethod"></el-progress>
    <!--基本信息-->
    <div class="basicInfo">
      <div class="header">
        基本信息
      </div>
      <div
        v-if="!editConfirm"
        class="showInfo"
        @mouseover="showInfoMouseOver"
        @mouseleave="showInfoMouseLeave"
      >
        <div class="edit" @click="editClick" v-show="showInfoEdit">
          <span class="iconfont icon-bianji"></span> 编辑
        </div>
        <div class="infoItem">
          <span class="title">用户昵称</span><span class="value">{{this.userInfo.name}}</span>
        </div>
        <div class="infoItem">
          <span class="title">年龄</span><span class="value">{{this.userInfo.age}}</span>
        </div>
        <div class="infoItem">
          <span class="title">性别</span><span class="value">{{this.userInfo.sex===1? '男' : '女'}}</span>
        </div>
        <div class="infoItem">
          <span class="title">真实姓名</span><span class="value">{{userInfo.trueName}}</span>
        </div>
        <div class="infoItem">
          <span class="title">个人简介</span
          ><span class="value"
            >{{userInfo.description}}</span
          >
        </div>
      </div>
      <!--编辑区域-->
      <div v-else class="editInfo" :class="{'clickin': editConfirm}">
        <el-form
          ref="form"
          :model="userInfo"
          label-width="80px"
          class="basicForm"
        >
          <el-form-item label="用户昵称">
            <el-input v-model="userInfo.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="userInfo.age"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="userInfo.trueName"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="resource">
            <el-radio-group v-model="userInfo.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="个人简介" prop="desc">
            <el-input type="textarea" v-model="userInfo.description"></el-input>
          </el-form-item>
        </el-form>
        <div class="btnGroup">
          <el-button round class="diyBtn" @click="basicCancel">取消</el-button>
          <el-button type="danger" round @click="saveBasicInfo" class="diyBtn">保存</el-button>
        </div>

      </div>
    </div>
    <!--教育信息-->
    <div class="eduInfo">
      <div class="header">
        教育信息
      </div>
      <div
        v-if="!eduEditConfirm"
        class="showInfo"
        @mouseover="showEduMouseOver"
        @mouseleave="showEduMouseLeave"
      >
        <div class="edit" @click="eduEditClick" v-show="showEduEdit">
          <span class="iconfont icon-bianji"></span> 编辑
        </div>
        <div class="infoItem">
          <span class="title">学院名称</span><span class="value">{{userInfo.college}}</span>
        </div>
        <div class="infoItem">
          <span class="title">专业</span><span class="value">{{userInfo.discipline}}</span>
        </div>
        <div class="infoItem">
          <span class="title">目前状态</span><span class="value">{{userInfo.iswork===1?'已工作': '在上学'}}</span>
        </div>
        <div class="infoItem">
          <span class="title">毕业年份</span><span class="value">{{userInfo.graduateAt}}</span>
        </div>
      </div>
      <!--编辑区域-->
      <div v-else class="editInfo" :class="{'clickin': eduEditConfirm}">
        <el-form
          ref="form"
          :model="userInfo"
          label-width="80px"
          class="basicForm"
        >
          <el-form-item label="学院名称">
            <el-input v-model="userInfo.college"></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="userInfo.discipline"></el-input>
          </el-form-item>
          <el-form-item label="毕业年份">
            <el-input v-model="userInfo.graduateAt"></el-input>
          </el-form-item>
          <el-form-item label="目前状态">
            <el-radio-group v-model="userInfo.iswork">
              <el-radio :label="0">在上学</el-radio>
              <el-radio :label="1">已工作</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="btnGroup">
          <el-button round class="diyBtn" @click="eduCancel">取消</el-button>
          <el-button type="danger" round @click="saveEduInfo" class="diyBtn">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgkey: true,
      headerObj: {
        authorization: 'Bearer ' + window.sessionStorage.getItem('token')
      },
      percentage: 0,
      showInfoEdit: false,
      editConfirm: false,
      basicInfoForm: {
      },
      eduEditConfirm: false,
      showEduEdit: false,
      userInfo: {
        sex: 1,
        iswork: 0
      },
      eduInfoForm: {
      },
      oldUserInfo: {}
    }
  },
  methods: {
    async fileSuccess () {
      this.imgkey = !this.imgkey
      this.$bus.$emit('avatarChange')
    },
    formatpercentage (percentage) {
      return `用户资料完善${percentage}%`
    },
    customColorMethod (percentage) {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    },
    showInfoMouseOver () {
      this.showInfoEdit = true
    },
    showInfoMouseLeave () {
      this.showInfoEdit = false
    },
    showEduMouseOver () {
      this.showEduEdit = true
    },
    showEduMouseLeave () {
      this.showEduEdit = false
    },
    async saveBasicInfo () {
      await this.$http.post('/users/updateBasicInfo', this.userInfo)
      this.getUserInfo()
      this.editConfirm = false
    },
    editClick () {
      this.editConfirm = true
    },
    eduEditClick () {
      this.eduEditConfirm = true
    },
    async saveEduInfo () {
      await this.$http.post('/users/updateEduInfo', this.userInfo)
      this.getUserInfo()
      this.eduEditConfirm = false
    },
    async getUserInfo () {
      const userId = JSON.parse(window.sessionStorage.getItem('userInfo')).id
      const res = await this.$http.get(`/users/${userId}`)
      this.userInfo = res.data
      this.percentage = this.caculatePercentage()
      this.oldUserInfo = JSON.parse(JSON.stringify(res.data))
      console.log(this.userInfo, 'hhhh')
    },
    eduCancel () {
      this.userInfo.college = this.oldUserInfo.college
      this.userInfo.discipline = this.oldUserInfo.discipline
      this.userInfo.graduateAt = this.oldUserInfo.graduateAt
      this.eduEditConfirm = false
    },
    basicCancel () {
      this.userInfo.age = this.oldUserInfo.age
      this.userInfo.sex = this.oldUserInfo.sex
      this.userInfo.trueName = this.oldUserInfo.trueName
      this.userInfo.description = this.oldUserInfo.description
      this.editConfirm = false
    },
    caculatePercentage () {
      let total = 0
      let i = 0
      console.log(this.userInfo)
      for (let key in this.userInfo) {
        let keyArr = ['age', 'trueName', 'description', 'college', 'discipline', 'graduateAt']
        if (this.userInfo.hasOwnProperty(key)) {
          if (keyArr.indexOf(key) !== -1) {
            total += 1
            if (this.userInfo[key] === '' || this.userInfo[key] === null) {
              continue
            } else {
              i += 1
            }
          }
        }
      }
      console.log(i, total, i / total)
      return parseInt((i / total) * 100)
    }
  },
  created () {
    this.getUserInfo()
    this.$bus.$emit('profile', 1)
  }
}
</script>

<style scoped lang="less">
.avatarErea {
    position: relative;
    margin-right: 20px;
    .avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
    }
    .camera {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 64px;
      border-radius: 50%;
    }
  }
  .avatarErea:hover .camera {
    i {
      font-size: 28px;
      color: white;
    }
    cursor: pointer;
    opacity: 1 !important;
    background-color: rgba(77, 79, 81, 0.5);
  }
.userInfo {
  padding-left: 30px;
  display: flex;
  height: 100px;
  align-items: center;
  background-color: #fff;
}
.userName {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
}
.mokuai {
  margin-bottom: 20px;
}
.basicInfo {
  background-color: #fff;
  padding-bottom: 20px;
}
.header {
  padding-left: 20px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #f0f0f2;
  margin-bottom: 10px;
}
.showInfo {
  position: relative;
  width: 98%;
  margin: 0 auto;
  cursor: pointer;
}
.showInfo:hover,.clickin {
  background-color: #f8f8f8;
}
.showInfo .title {
  color: #555666;
  margin: 0 30px;
  display: inline-block;
  width: 4em;
  text-align: justify;
  text-align-last: justify;
}
.showInfo .title::after {
  content: '';
  display: inline-block;
  width: 100%;
}
.showInfo .value {
  color: #222226;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 300px;
}
.infoItem {
  height: 40px;
  line-height: 40px;
  display: flex;
}
.edit {
  position: absolute;
  right: 20px;
  top: 20px;
}
.editInfo {
  width: 96%;
  margin: 0 auto;
  padding: 10px;
}
.basicForm {
  display: flex;
  flex-wrap: wrap;
}
.basicForm .el-form-item {
  width: 50%;
}
.eduInfo{
  background-color: #fff;
  padding-bottom: 20px;
  margin-top: 20px;
}
.btnGroup{
  display: flex;
  justify-content: center;
}
.btnGroup .diyBtn{
  width: 100px;
}
.el-progress{
  margin-bottom: 10px;
}
.container /deep/ .el-progress-bar__inner{
  text-align: left;
}
</style>
